<template>
	<view  style="background: #F4F4F4;height: 100%;" v-cloak>
	    <view class="my_info">
	      <view class="the_fisrt_line">
	        <view class="imgadd">
				<image style="width: 2.3rem;height: 2.1rem;" src="../../static/icon/add_friends.png" @click="add_friend"></image>
			</view>
	        <!-- <view class="mycoin">
				<image style="height: 1.1rem;width: 1.1rem" src="../../static/icon/mycoin.png"></image>
	            <text>10</text>
	        </view> -->
	        <view class="share" @click="share">
	          邀请
	        </view>
	      </view>
		  <image :src="userInfo.head"
           class="head_sculpture" v-on:click.stop="showHdPic(userInfo.head)"
           onerror="this.src='../../static/icon/default/head_not_found.jpg'" style="width: 3rem;height: 3rem;"></image>
		  <!-- <image class="head_sculpture" src="../../static/icon/default/head_not_found.jpg" style="width: 3rem; height: 3rem;"></image> -->
	      <view class="name_pen">
	        <view style="display: flex;">
	          <view class="np1" style="color: white;margin-top: 0.5rem">{{userInfo.name}}</view>
	          <view class="np2">
				  <image style="width: 1rem;height: 1rem" src="../../static/icon/pen.png" @click="modifyInfo()"></image>
	          </view>
	        </view>
	      </view>

	      <text style="color: white">简介：{{userInfo.description}}</text><br/>
	      <view class="classify">
			  <navigator url="follow/follow" class="list" >
				    
	          <text style="font-weight: bold;font-size: 1rem;color: #ffea1d">{{userInfo.countFollow}}</text>
	          <text>关注</text>
	      
			  </navigator>
	     <navigator url="fans/fans" class="list">
			
	          <text style="font-weight: bold;font-size: 1rem;color: #ffea1d">{{userInfo.countFans}}</text>

	          <text class="fans">粉丝</text>
	      
		 </navigator>
	       
	      </view>
	    </view>
	    <view class="about_me">
	      <p>与我相关</p>
	      <hr>
	      <view class="about_four">
	        <li @click="toMeaasge(1)">
			  <image src="../../static/icon/blog_c2.png" style="height: 1.6rem;width: 1.6rem"></image>
	          <p style="font-size: 16;">博文
	            <mt-badge size="small">{{notRead.blogNum}}</mt-badge>
	          </p>
	        </li>
	        <li @click="toMeaasge(2)">
			   <image src="../../static/icon/heart_c2.png" style="height: 1.6rem;width: 1.6rem"></image>
	          <p>愿望
	            <mt-badge size="small">{{notRead.wishNum}}</mt-badge>
	          </p>
	        </li>
	        <li @click="toMeaasge(3)">
			  <image src="../../static/icon/time_c2.png" style="height: 1.6rem;width: 1.6rem"></image>
	          <p>时间胶囊
	            <mt-badge size="small">{{notRead.timeNum}}</mt-badge>
	          </p>
	        </li>
	      </view>
	    </view>
	    <view class="ring">
	      <view class="ring_part" @click="timedWish()">
			<image src="../../static/icon/ring.png"></image>
	        <p>我的愿望要到期啦...</p>
	        <view class="circle">
	          <p>{{countWishVerify}}</p>
	        </view>
	      </view>
	    </view>

	    <view class="feedback">
	      <adCell text="我的博文" @click="myBlog()"></adCell>
	    </view>
	    <view>
	      <adCell text="我的愿望" @click="myWish()"></adCell>
	    </view>
	    <view>
	      <adCell text="我的时间胶囊" @click="myTimes()"></adCell>
	    </view>
		<view>
			<adCell text='成为推广人' detail="您已成为推广人" @click="toPromoter()"></adCell>
		</view>
		<view>
			<adCell text="钱包" @click="toWallet()"></adCell>
		</view>
		<view>
			<adCell text="下载连接" @click="toDownload()"></adCell>
		</view>
		<view>
			<adCell text="意见反馈" @click = "feedback()"></adCell>
		</view>
		<view>
			<adCell text="版本说明" @click="toInfo()"></adCell>
		</view>
	    <view style="margin-top: 10px;">
			<button @click="logout()">
				<text style="text-align: center; color: #FF9800; font-size: 16;">退出当前账号</text>
			</button>
	    </view>

	    <br/>
	    <br/>
	    <br/>
	    <br/>
	    <br/>
	</view>
</template>

<script>
	import adCell from '@/components/andy-adcell/andy-adcell.vue';
	import {
		GET_USERINFO,
		GET_COUNTWISHVERIFY,
		GET_INVITE,
		GET_NOTREAD
	} from '@/store/mutation-types.js'
	export default {
		components:{adCell},
		data() {
			return {
				    userInfo: {},
					currentMyUrl: '',
					wallet: {},
					show: false,
					hdUrl: "",
					notRead: {},
					flag: false,
					countWishVerify: 0,
					invite:{}
			}
		},
		mounted() {
			let app = this;
			app.getUserInfo();
			app.getNotRead();
			app.getCountWishVerify();
			app.getInvite();
		},
		methods: {
			add_friend(){
				uni.navigateTo({
					url:"add_friends/add_friends"
				})
			},
			share(){
				uni.navigateTo({
					url:"invite_user/invite_user"
				})
			},
			feedback(){
				uni.navigateTo({
					url:"feedback/feedback"
				})
			},
			getUserInfo() {
				console.log("getUserInfo函数")
				let app = this;
				console.log("调用getUserInfo函数");
				let user = uni.getStorageSync("user");
				if(user == null || user == undefined || user == ""){
					app.$toast("请重新登录")
					uni.redirectTo({
						url:"login_byPassword/login_byPassword"
					})
				}
				console.log(user)
				user = JSON.parse(user)
				// console.log(user.id)
				console.log(user.phoneNumber)
				const data = {
					userId:user.id
				}
				const success = function(result){
					if(result.error == '0'){
						// console.log("成功了")
						// console.log(result)
						app.userInfo = result.data
						uni.setStorageSync("user" ,JSON.stringify(result.data))
					}else{
						console.log(result)
						// console.log('失败了')
					}
				}
				this.$store.dispatch(`user/${GET_USERINFO}`,{
					data,
					onSuccess:success
				})
			},
			getCountWishVerify(){
				console.log("getCountWishVerify函数")
				let app = this;
				const success = function(result){
					if(result.error == '0'){
						console.log("我的愿望要到期了！！！！！")
						console.log(result.data);
						app.countWishVerify = result.data.count;
					}else if(result.error == '1'){
						app.$toast("登录过期，请重新登录");
						uni.redirectTo({
							url:"login_byPassword/login_byPassword"
						})
					}else{
						console.log('出错了！！！！')
						app.$toast(result.error)
					}
				}
				this.$store.dispatch(`user/${GET_COUNTWISHVERIFY}`,{
					onSuccess:success
				})
			},
			getNotRead(){
				console.log('getNotRead函数');
				let app = this;
				const success = function(result){
					// result = JSON.parse(result)
					console.log(result)
					if(result.error == '0'){
						console.log("成功")
						app.notRead = result.data;
						console.log(result.data)
					}else if(result.error == '1'){
						app.$toast('登录过期，请重新登录');
						uni.redirectTo({
							url:"login_byPassword/login_byPassword"
						})
					}else{
						console.log("出错");
						console.log(result.error)
						app.$toast(resulr.data)
					}
				}
				this.$store.dispatch(`user/${GET_NOTREAD}`,{
					onSuccess:success
				})
			},
			getInvite(){
				console.log('getInvite函数');
				let app = this;
				const success = function(result){
					console.log(result)
					if(result.error == '0'){
						this.invite = result.data;
					}else{
						app.$toast(result.error)
					}
				}
				this.$store.dispatch(`user/${GET_INVITE}`,{
					onSuccess:success
				})
			},
			logout(){
				// uni.localStorage.clear();
				uni.redirectTo({
					url:"login_byPassword/login_byPassword"
				})
			},
			myBlog(){
			uni.navigateTo({
				url:'my_blog/my_blog'
			})

			},
			myWish(){
				uni.navigateTo({
					url:'my_wish/my_wish'
				})
			},
			myTimes(){
			uni.navigateTo({
				url:'my_capsule/my_capsule'
			})
			},
			toPromoter(){

			},
			toWallet(){
				let app = this;
				app.$toast('跳转到钱包页面')
			},
			toDownload(){
				uni.navigateTo({
					url:"invite_user/invite_user"
				})
			},
			toInfo(){
				uni.navigateTo({
					url:'infor/infor'
				})
			},
			modifyInfo(){
				uni.navigateTo({
					url:'userInfo/userInfo'
				})
			},
			toMeaasge(type){
				if(type===3){
					uni.navigateTo({
						url:'my_capsule/my_capsule'
					})
				}
				else
					uni.navigateTo({
						url:`message/message?type=${type}`
					})
			},
			timedWish(){
					uni.navigateTo({
						url:'my_wish/my_wish'
					})
			},
		}
	}
</script>

<style>
	[v-cloak] {
	    display: none;
	}
	html{
	    height: 100%;
	    margin:0;
	    padding:0;
	    font-size: 87.5%;
	}
	body{
	    height: 100%;
	    margin:0;
	    padding:0;
	}
	.mint-cell {
	    background-color:#fff;
	    box-sizing:border-box;
	    color:inherit;
	    min-height:48px;
	    display:block;
	    overflow:hidden;
	    position:relative;
	    text-decoration:none;
	}
	.page_spinner {
	    position: fixed;
	    background: url(../../static/icon/default/loading.gif) no-repeat #fff;
	    z-index: 9999;
	    width: 100%;
	    background-size: 30%;
	    background-position: center;
	    height: 100%;
	    top: 0;
	    left: 0;
	}
	.mint-header {
	    height: 3.2rem;
	}

	.add_fri{
	    width: 1.8rem;
	    height: 1.8rem;
	}
	.setting{
	    height: 20px;
	}
	.mint-header-title{
	    font-size: 1.15rem;
	    font-weight: bold;
	}
	.my_info{
	    text-align: center;
	    padding: 0.7rem;
	    background: linear-gradient(to bottom right, #ff9b39,#FF593F);
	    padding-top: 3rem;
	}
	.my_info .the_fisrt_line{
	    margin-top: -2rem;
	    display: flex;
	}
	.my_info .the_fisrt_line .imageadd{
	    flex:1;
	    margin-right: 13rem;

	}
	.my_info .the_fisrt_line .share{
	    flex:1;
	    margin-left: 13rem;
	    font-size: 1.1rem;
	    margin-top: 0.5rem;
	    color: #ffffff;

	}
	.my_info .the_fisrt_line .mycoin{
	    flex: 1;
	    margin-right: -5rem;
	    margin-top: 0.5rem;
	}
	.my_info .the_fisrt_line .mycoin text{
	    font-size: 1.25rem;
	    color: #ffffff;
	}

	.my_info .head_sculpture{
	    width: 5.7rem;
	    height: 5.5rem;
	    border-radius: 50px;
	    border:2.5px solid #ffffff;
	}
	.my_info .name_pen{
	    display: flex;
	    justify-content: center;
	    margin-bottom: 0.5rem;
	}
	.my_info .name_pen .np1{
	    font-size: 1.2rem;
	}
	.my_info .name_pen .np2{
	    margin-top: 0.8rem;
	    margin-left: 0.5rem;
	}
	.my_info p{
	    margin: 0;
	}
	.my_info text{
	    color: #ffffff;
	    font-size: 1rem;
	}
	.classify{
	    width: 84%;
	    display: flex;
	    margin: 0 auto;
	    margin-top: 10px;
	}
	.classify .list{
	    flex: 1;
	    color:#ffffff ;
	    text-align: center;
	    margin-top: 0.5rem;
	    padding-top: 0.4rem;
	    padding-bottom: 0.4rem;
	    border-right: 3px solid rgba(255,255,255,0.5);
	    width: 30%;
	    float: left;
	    background-color:rgba(255,255,255,0.25);
	}

	.classify .list:nth-child(1){
	    border-radius: 0.5rem 0 0 0.5rem;
	}
	.classify .list:nth-child(2){
	    border-radius: 0 0.5rem 0.5rem 0;
	}
	.classify .list:last-child{
	    border-right: none;
	}
	.classify .list p{
	    margin: 0;
	}
	.classify .list .fans{
	    text-align: center;
	}
	.classify .list .fans p{

	}
	.classify .list .fans .circle{
	    /*flex: 1;*/
	    margin-left: 0.2rem;
	    margin-top: 0.1rem;
	    width: 0.9rem;
	    height: 0.9rem;
	    background: #FFFFFF;
	    color: #000000;
	    border-radius: 50%;
	    border: 1px solid rgba(255,255,255,0.5);
	    text-align: center;
	}
	.classify .list .fans .circle p{
	    margin: 0;
	    margin-top: -0.1rem;
	    font-size: 0.9rem;
	}
	.about_me{
	    margin: 0.5rem;
	    /*margin-top: 1rem;*/
	    background: #ffffff;
	    border-radius: 0.5rem;
	    /*text-align: center;*/
	    padding: 0.7rem;
	}
	.about_me p{
	    margin: 0;

	}
	.about_me hr{
	    border: 0;
	    height: 1px;
	    /*margin: 0.5rem auto;*/
	    background-color:#ff7a3c;
	}
	.about_me .about_four{
	    display: flex;
	    margin-top: 1rem;
	}
	.about_me .about_four li{
	    list-style-type:none;
	    flex: 1;
	    text-align: center;
	}
	.about_me .about_four li image{
	    width: 3rem;
	    height: 3rem;
	}
	.ring{
	    margin: 0.5rem;
	    /*margin-top: 1rem;*/
	    background: #ffffff;
	    border-radius: 0.5rem;
	    /*text-align: center;*/
	    padding: 0.7rem;
	}
	.ring .ring_part{
	    display: flex;
	}
	.ring .ring_part image{
	    width: 1.5rem;
	    height:1.5rem;
	    text-align: left;
	    /*flex: 1;*/
	}
	.ring .ring_part p{
	    margin: 0;
	    flex: 3;
	    margin-left: 0.5rem;
	}
	.ring .ring_part .circle{
	    margin-left: 0.2rem;
	    margin-top: 0.1rem;
	    width: 1rem;
	    height: 1rem;
	    background: #208fe0;
	    color: #FFFFFF;
	    border-radius: 50%;
	    border: 1px solid #ffffff;
	    text-align: center;
	    padding: 2px 1px 1px 1px;
	}
	.ring .ring_part .circle p{
	    font-size: 0.9rem;
	    margin-top: -0.1rem;
	    margin-left: -0.01rem;
	}
	.ring hr{
	    width: 90%;
	}
	.advertisement{
	    margin: 0.5rem;
	    /*margin-top: 1rem;*/
	    background: #ffffff;
	    border-radius: 1rem;
	    /*text-align: center;*/
	    padding: 0.7rem;
	}
	.bg{
	    position: fixed;
	    width: 100%;
	    height:100%;
	    background: rgba(132,128,128,0.5);
	    left:0px;
	    top:0px;
	    z-index: 1;
	    display: none;
	}
	.change_bg{
	    position: fixed;
	    top: 40%;
	    left: 32%;
	    background: white;
	    line-height: 0.7rem;
	    height: 2.5rem;
	    width: 10rem;
	    border-radius: 1rem;
	    text-align: center;
	    z-index: 2;
	    display: none;
	}
	.hdPic {
	    position: fixed;
	    width: 100%;
	    background:rgba(255, 255, 255, 0)
	}
	.out{
	    width: 100%;
	    height: 3rem;
	    line-height: 3rem;
	    background: #ffffff;
	    margin-top: 0.5rem;
	    text-align: center;
	}
	.out text{
		margin-top: 0.5rem;
	    color: #e35f10;
	}
	[v-cloak]{
	    visibility: hidden !important; /*防止被覆盖*/
	}


</style>
